<template>
  <div id="app">
    <h1 v-text="title"></h1>
    <input v-model="newItem" @keyup.enter="addNew">
    <p>
      <ul>
      <li v-for="item in items" 
          v-bind:class="{finished:item.isFinished}" 
          v-bind:key="item.isFinished" 
          v-on:click="toggle(item)">
        {{item.label}}
      </li>
    </ul>
    </p>
  </div>
</template>

<script>
import storage from './storage'
export default {
  data:function(){
      return {
        title:'this is a todo list',
        items: storage.fetch(),
        newItem:''
      }
  },
  methods:{
    addNew:function(){
      this.items.push({
        label:this.newItem,
        isFinished:false
      })
      this.newItem = ''
    },
    toggle:function(item){
      item.isFinished = !item.isFinished
    }
  },
  watch:{
    items:{
      handler:function(val){
        // console.log(val)
        storage.save(val)
      },
      deep:true
    }
  }
}
</script>

<style>
.finished{
  text-decoration-line: underline
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
